{extend name="admin/layout" /}

{block name="content"}

<div class="layui-card layui-card-panel">
    <div class="layui-card-header" style="height: auto;">
        <form class="layui-form">
<!--            搜索1-->
            <div class="layui-row">
                <div class="layui-col-md2">
                    <div class="layui-form-item">
                        <label class="layui-form-label w60">邮箱</label>
                        <div class="layui-input-block">
                            <input type="text" name="contact_email" class="layui-input" autocomplete="off" placeholder="邮箱">
                        </div>
                    </div>
                </div>
                <div class="layui-col-md2">
                        <div class="layui-form-item">
                            <label class="layui-form-label label-width">草稿单号</label>
                            <div class="layui-input-block">
                                <input type="text" name="name" class="layui-input" autocomplete="off" placeholder="草稿单号">
                            </div>
                        </div>
                    </div>
                <div class="layui-col-md3">
                        <div class="layui-form-item">
                            <label class="layui-form-label">店铺</label>
                            <div class="layui-input-block">
                                <select name="shop_id" lay-search="" lay-filter="demo-select-filter">
                                    <option value="">请选择店铺</option>
                                    {foreach $shopList as $shop}
                                    <option value="{$shop['id']}">{$shop['name']}</option>
                                    {/foreach}
                                </select>
                            </div>
                        </div>
                </div>
                <div class="layui-col-md3">
                    <div class="layui-form-item">
                        <label class="layui-form-label label-width">支付方式</label>
                        <div class="layui-input-block">
                            <select name="pay_method" lay-search=""  id="payment-method-select">
                                <option value="">请选择支付方式</option>
                                {foreach $paymentList as $type => $payment}
                                <option value="{$type}">{$payment}</option>
                                {/foreach}
                            </select>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md2">
                   <div class="layui-form-item">
                       <label class="layui-form-label label-width">订单状态</label>
                       <div class="layui-input-block">
                           <select name="order_status" lay-search="">
                               <option value="">请选择订单状态</option>
                               {foreach $orderStatus as $key => $vo}
                               <option value="{$key}">{$vo}</option>
                               {/foreach}
                           </select>
                       </div>
                   </div>
                </div>
            </div>

            <div class="layui-row">
                <div class="layui-col-md2">
                    <div class="layui-form-item">
                        <label class="layui-form-label label-width">订单编号</label>
                        <div class="layui-input-block">
                            <input type="text" name="last_order_name" class="layui-input" autocomplete="off" placeholder="订单编号">
                        </div>
                    </div>
                </div>

                <div class="layui-col-md2">
                    <div class="layui-form-item">
                        <label class="layui-form-label label-width">北京时间</label>
                            <div class="layui-input-block">
                                <input type="text" class="layui-input" name="created_at" id="order-created" placeholder="开始 到 结束" style="width: 200px;">
                            </div>
                    </div>
                </div>


                <div class="layui-col-md2" style="margin-left: 10px;">
                    <div class="layui-form-item">
                        <label class="layui-form-label label-width">美国时间</label>
                        <div class="layui-input-block">
                            <input type="text" class="layui-input" name="us_at" id="us-at" placeholder="开始 到 结束" style="width: 200px;">
                        </div>
                    </div>
                </div>

                <div class="layui-col-md2">
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn" lay-submit lay-filter="order-table-search">Search</button>
                        </div>
                    </div>
                </div>


            </div>
        </form>

    </div>

    <div class="layui-card-body">
        <table class="layui-hide" id="order-list"></table>
    </div>
</div>

{/block}

{block name="js"}


<script type="text/html" id="order-operation">
    <div class="layui-clear-space">
        <a class="layui-btn layui-btn-xs" lay-event="edit">查看</a>
    </div>
</script>





<script>
    layui.use(['table','laydate','form'],function(){
        var table = layui.table;
        var form = layui.form;
        var laydate = layui.laydate
        //渲染日期
        // 创建表格实例
        table.render({
            elem: '#order-list',
            url: "/admin/order/data", // 此处为静态模拟数据，实际使用时需换成真实接口
            toolbar: '#toolbarDemo',
            cols: [[
                {field:'id', title: 'ID', width:80, sort: true},
                {field:'shop_name', title: '店铺代码', width:240},
                {field:'name', title: '草稿编号', width:80},
                {field:'last_order_name', title: '订单编号', width:100},
                {field:'transaction_id', title: '交易号', width:80},
                {field:'total_price', title: '金额', width:80},
                {field:'pay_method', title: '支付方式', width:80},
                {field:'order_status', title: '支付状态', width:120,templet: function (d){
                        if(d.order_status == 2){
                            return '<button class="layui-btn layui-btn-danger layui-btn-sm">支付失败</button>';
                        }else if(d.order_status == 1){
                            return '<button class="layui-btn layui-btn-normal layui-btn-sm">支付成功</button>';

                        }else{
                            return '<button class="layui-btn layui-btn-primary layui-btn-sm">待支付</button>';
                        }
                    }},
                {field:'created_at', title: '时间-CN',width:160},
                {field:'created_date', title: '时间-US',width:160},
                {field:'contact_email', title: '客户邮箱', width:220},
                { title:'操作', width: 60, minWidth: 125, toolbar: '#order-operation'}
            ]],
            page: true,
            height: 600,
            loading: true,
        });


        // 搜索提交
        form.on('submit(order-table-search)', function(data){
            var field = data.field; // 获得表单字段
            // 执行搜索重载
            table.reload('order-list', {
                page: {
                    curr: 1 // 重新从第 1 页开始
                },
                where: field // 搜索的字段
            });

            return false; // 阻止默认 form 跳转
        });


        table.on('tool(order-list)', function(obj){ // 双击 toolDouble
            var data = obj.data; // 获得当前行数据
            // console.log(obj)
            if(obj.event === 'edit'){

                console.log(11111)
                location.href = `/admin/order/${data.id}`
            }
        });

    //日期选择
        laydate.render({
            elem: "#order-created",
            range: true,
            format: 'yyyy/MM/dd',
            shortcuts: [
                {
                    text: "上周",
                    value: function(){
                        var date = new Date();
                        var year = date.getFullYear();
                        var month = date.getMonth();
                        var dayOfWeek = date.getDay();
                        var dayOfMonth = date.getDate();
                        var monday = dayOfMonth - dayOfWeek - 6;
                        var sunday = dayOfMonth - dayOfWeek;

                        return [
                            new Date(year, month, monday),
                            new Date(year, month, sunday)
                        ];
                    }
                },
                {
                    text: "上月",
                    value: function(){
                        var date = new Date();
                        var year = date.getFullYear();
                        var month = date.getMonth();
                        return [
                            new Date(year, month - 1, 1),
                            new Date(year, month, 0)
                        ];
                    }
                },
                {
                    text: "本月",
                    value: function(){
                        var date = new Date();
                        var year = date.getFullYear();
                        var month = date.getMonth();
                        return [
                            new Date(year, month, 1),
                            new Date(year, month + 1, 0)
                        ];
                    }
                },
            ],
        });

        //美国时间
        //日期选择
        laydate.render({
            elem: "#us-at",
            range: true,
            format: 'yyyy/MM/dd',
            shortcuts: [
                {
                    text: "上周",
                    value: function(){
                        var date = new Date();
                        var year = date.getFullYear();
                        var month = date.getMonth();
                        var dayOfWeek = date.getDay();
                        var dayOfMonth = date.getDate();
                        var monday = dayOfMonth - dayOfWeek - 6;
                        var sunday = dayOfMonth - dayOfWeek;

                        return [
                            new Date(year, month, monday),
                            new Date(year, month, sunday)
                        ];
                    }
                },
                {
                    text: "上月",
                    value: function(){
                        var date = new Date();
                        var year = date.getFullYear();
                        var month = date.getMonth();
                        return [
                            new Date(year, month - 1, 1),
                            new Date(year, month, 0)
                        ];
                    }
                },
                {
                    text: "本月",
                    value: function(){
                        var date = new Date();
                        var year = date.getFullYear();
                        var month = date.getMonth();
                        return [
                            new Date(year, month, 1),
                            new Date(year, month + 1, 0)
                        ];
                    }
                },
            ],
        });



        //选择框事件
        form.on('select(demo-select-filter)',(data)=>{
            var shopId = data.value
            $.ajax({
                url: `/admin/shop/payment/${shopId}`,
                dataType:'json',
                type:'get',
                success:(data)=>{
                    console.log(data)
                    let payments = data.data

                    let html = '<option value="">请选择支付方式</option>';
                    payments.forEach((item,index)=>{
                        console.log(1111,item)
                        html += `<option value="${item.id}">${item.account}</option>`
                    })
                    $('#payment-method-select').empty()
                    $('#payment-method-select').append(html)
                    form.render('select')

                },
            })
        })
    });
</script>

{/block}


